<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot3-WebFlux-测试</title>
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
     <div><button @click="btnClick">请求Flux</button></div>
    <div style="background-color: pink; height: 600px;">
        <div v-for="item in list" style="font-size: 26px; color: black;">{{item}}</div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            list: [],
            http: null
        },
        created() {
            this.http = axios.create({
                baseURL: 'http://localhost:8080',
                timeout: 100000,
                headers: {'X-Custom-Header': 'foobar'},
                responseType: 'stream', // 默认值
                // `onDownloadProgress` 允许为下载处理进度事件
                // 浏览器专属
                onDownloadProgress:  (progressEvent) => {
                    // 处理原生进度事件
                    // console.log("onUploadProgress => progressEvent", progressEvent)
                    this.handlerUploadProgress(progressEvent)
                },
            });
        },
        methods: {
            btnClick() {
                this.list = []
                this.http.get('/hello/flux/interval')
                    .then( (response) => {
                        console.log(response.data);
                        console.log(response.status);
                        console.log(response.statusText);
                        console.log(response.headers);
                        console.log(response.config);
                    }).catch( (error) => {
                        console.log("error => ", error);
                    });
            },
            handlerUploadProgress({ event }) {
                const {currentTarget} = event;
                console.log("handlerUploadProgress => currentTarget: ", currentTarget);
                this.handlerData(currentTarget.responseText);
            },
            handlerData(responseText) {
                const arr = responseText.split("\n\n");
                this.list = arr.filter(o => o !== '');
            },
        }
    });
</script>
</html>